<template>
	<view class="login">
		<view class="login1">
	<view class="image">
		<image src="../../static/my/603cf41f-e865-4e9b-96de-2713b360ad4a.png" mode="widthFix"></image>
	</view>
			  
			  <view class="inp">
			  	<input class="inp1" type="text" name="" id="" placeholder="请输入你的账号" v-module="username">
				<input class="inp2" type="password" name="" id="" placeholder='请输入您的密码' v-model="password">
			  </view>
			  
			  <view class="bun">
				  <text>用户注册</text>
				  <text>找回密码</text>
			  </view>
			  
			  <view class="btn1" @tap="goindex">
			  	登陆
			  </view>
			  <view class="btn2">
			  	微信授权/一键登录
			  </view>
			  <view class="bunn">
			  	乐分宝科技有限公司
			  </view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from "vuex"
	export default {
		data() {
			return {
				username:"",
				password:""
			};
		},
		methods:{
			...mapMutations(['setuser']),
			goindex(){
				this.setuser({username:this.username,password:this.password})
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	
 .login{
	 position: relative;
	 width: 100vw;
	 height: 100vh;
	 background-color: #ffffff;
	 
 }
 .bunn{
	 position: absolute;
	 bottom: 30rpx;
	left: 300rpx;
	font-size: 18rpx;
 }
 .login1{
	 margin: auto;
	 width: 710rpx;
	 height: 100vh;
 }
 .image{
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 height: 420rpx;
	 width: 710rpx;
	 image{
	 display: block;
	 width: 400rpx;
	 
 }
 }
 
 .inp{
	 height: 240rpx;
	 width: 100%;
	
	.inp1{
		width: 100%;
		height: 80rpx;
		border-bottom: 1rpx solid #b1eed9;
		font-size: 24rpx;
		line-height: 80rpx;
		
	} 
	.inp2{
		width: 100%;
		height: 80rpx;
		border-bottom: 1rpx solid #aeaeae;
		font-size: 24rpx;
		line-height: 80rpx;
		margin-top: 30rpx;
	} 
 }
 .bun{
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 width: 710rpx;
	 height: 60rpx;
	 margin-top: -30rpx;
	 text{
		 color: #00c783;
		 font-size: 24rpx;
		 
	 }
 }
 .btn1{
	 width: 100%;
	 height: 70rpx;
	 text-align: center;
	 line-height: 70rpx;
	 color: #ffffff;
	 margin-top: 80rpx;
	 background-color: #00c783;
	 font-size: 30rpx;
	 border-radius: 10rpx;
 }
 .btn2{
	 width: 100%;
	 height: 70rpx;
	 text-align: center;
	 line-height: 70rpx;
	 color: #ffffff;
	 margin-top: 40rpx;
	 background-color: #ff9f00;
	 font-size: 30rpx;
	 border-radius: 10rpx;
 }
</style>
